<template>
  <!-- 登录后进入的首页 -->
  <div id="app">
    <!-- 主页模板 -->
    <div class="div" v-if="activeIndex == 'home'">
      <!-- 设置顶部导航栏 -->
      <mt-header title="医 院 管 理 系 统">
        <mt-button slot="left">
          <img
            src="../assets/images/hospital.png"
            height="30"
            width="30"
            slot="icon"
            class="headerImg"
          />
        </mt-button>
        <mt-button icon="more" slot="right"></mt-button>
      </mt-header>

      <!-- 轮播图 -->
      <mt-swipe :auto="4000">
        <mt-swipe-item class="swip-item-1 items">
          <img src="../assets/images/swap1.jpg" alt="" />
        </mt-swipe-item>
        <mt-swipe-item class="swip-item-2 items">
          <img src="../assets/images/swap2.jpg" alt="" />
        </mt-swipe-item>
        <mt-swipe-item class="swip-item-3 items">
          <img src="../assets/images/swap3.jpg" alt="" />
        </mt-swipe-item>
      </mt-swipe>

      <!-- 通知栏 -->
      <div class="Notice" style="margin-top: 10px" v-if="IsShow">
        <van-notice-bar
          left-icon="volume-o"
          mode="closeable"
          @close="closeNotice"
          text="医院管理系统全新升级，采用高性能结构，人性化操作，方便医务人员对日常工作的开展。"
        />
      </div>

      <!-- 首页主要功能区域 -->
      <div class="fucs">
        <div class="fucsOne">
          <p class="textInner">★主要功能★</p>
          <div class="Iwarp">
            <div class="inner" @click="goAppointment">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-guahao"></use>
              </svg>
              <span class="innerTxt">门诊挂号</span>
            </div>
            <div class="inner">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-bingrenzhuisu"></use>
              </svg>
              <span class="innerTxt" @click="goManagement">住院病人管理</span>
            </div>
          </div>
          <div class="Iwarp">
            <div class="inner" @click="goCost">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-danjushoufei"></use>
              </svg>
              <span class="innerTxt">住院费用管理</span>
            </div>
            <div class="inner">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-yaofang"></use>
              </svg>
              <span class="innerTxt" @click="goDrugManage">药品管理</span>
            </div>
          </div>
          <div class="Iwarp">
            <div class="inner" @click="toMedicalCase">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-binganfuyinbeifen"></use>
              </svg>
              <span class="innerTxt">病例病案</span>
            </div>
            <div class="inner" @click="toSearch">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo"></use>
              </svg>
              <span class="innerTxt">系统查询</span>
            </div>
          </div>
          <div class="Iwarp">
            <div class="inner lastInner" @click="goHospitalization">
              <img class="innerImg" src="../assets/images/staff.png" alt="" />
              <span class="innerTxt">挂号记录</span>
            </div>
            <div class="inner" @click="GoReport">
              <img
                class="innerImg"
                src="../assets/images/reportImg.png"
                alt=""
              />
              <span class="innerTxt">医院报表数据</span>
            </div>
          </div>
        </div>

        <div class="fucsTwo" style="margin-top: 20px">
          <p class="textInner">●综合服务●</p>
          <div class="Iwarp">
            <div class="inner">
              <img class="innerImg" src="../assets/images/Tu_08.png" alt="" />
              <span class="innerTxt" @click="goNavigation">智能导诊</span>
            </div>
            <div class="inner">
              <img class="innerImg" src="../assets/images/4_08.png" alt="" />
              <span class="innerTxt" @click="goSystem">系统介绍</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 即时查模板 -->
    <div class="div" v-else-if="activeIndex == 'search'">
      <!-- 设置顶部导航栏 -->
      <mt-header title="搜 索 系 统">
        <mt-button slot="left">
          <img
            src="../assets/images/hospital.png"
            height="30"
            width="30"
            slot="icon"
            class="headerImg"
          />
        </mt-button>
        <mt-button icon="more" slot="right"></mt-button>
      </mt-header>
      <!-- 搜索内容区域 -->
      <div class="SearchContent">
        <div class="inner" @click="goBedSearch">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-sousuo"></use>
          </svg>
          <span class="innerTxt">床位查询</span>
          <span class="txtItems">></span>
        </div>
        <div class="inner" @click="goDrgub">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-danjushoufei"></use>
          </svg>
          <span class="innerTxt">药品价格查询</span>
          <span class="txtItems">></span>
        </div>
        <div class="inner" @click="goDiagnostic">
          <svg class="icon inner3" aria-hidden="true">
            <use xlink:href="#icon-binganfuyinbeifen"></use>
          </svg>
          <span class="innerTxt">诊疗项目查询</span>
          <span class="txtItems">></span>
        </div>
      </div>
    </div>

    <!-- 记录中心模板 -->
    <!-- <div class="div" v-else-if="activeIndex == 'records'">
      <mt-header title="记 录 中 心">
        <mt-button slot="left">
          <img
            src="../assets/images/hospital.png"
            height="30"
            width="30"
            slot="icon"
            class="headerImg"
          />
        </mt-button>
        <mt-button icon="more" slot="right"></mt-button>
      </mt-header>
      <div class="RecordsContent">
        <div class="inner" @click="gorecord(1)">
          <svg class="icon icon1" aria-hidden="true">
            <use xlink:href="#icon-binganfuyinbeifen"></use>
          </svg>
          <span class="innerTxt">挂号预约记录</span>
          <span class="txtItems">></span>
        </div>
        <div class="inner" @click="gorecord(2)">
          <svg class="icon icon1" aria-hidden="true">
            <use xlink:href="#icon-binganfuyinbeifen"></use>
          </svg>
          <span class="innerTxt">住院预约记录</span>
          <span class="txtItems">></span>
        </div>
        <div class="inner" @click="gorecord(3)">
          <svg class="icon icon1" aria-hidden="true">
            <use xlink:href="#icon-binganfuyinbeifen"></use>
          </svg>
          <span class="innerTxt">体检预约记录</span>
          <span class="txtItems">></span>
        </div>
        <div class="inner">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shezhi"></use>
          </svg>
          <span class="innerTxt">清空缓存</span>
          <span class="txtItems">></span>
        </div>
      </div>
    </div> -->

    <!-- '更多' 模板 -->
    <div class="div" v-else-if="activeIndex == 'more'">
      <!-- 设置顶部导航栏 -->
      <mt-header title="更 多">
        <mt-button slot="left">
          <img
            src="../assets/images/hospital.png"
            height="30"
            width="30"
            slot="icon"
            class="headerImg"
          />
        </mt-button>
        <mt-button icon="more" slot="right"></mt-button>
      </mt-header>
      <!-- 内容区域 -->
      <div class="MoreContent">
        <div class="inner" @click="ToEvaluation">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-liuyan"></use>
          </svg>
          <span class="innerTxt">留言评价</span>
          <span class="txtItems">></span>
        </div>
        <div class="inner" @click="clear">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shezhi"></use>
          </svg>
          <span class="innerTxt">清空缓存</span>
          <span class="txtItems">></span>
        </div>
        <div class="inner" @click="userSetUp">
          <van-icon name="manager" size="26" />
          <span class="innerTxt">用户设置</span>
          <span class="txtItems">></span>
        </div>
      </div>
      <div class="btnClick">
        <van-button round size="large" type="danger" @click="outLogin"
          >注销登录</van-button
        >
      </div>
    </div>

    <!--底部选项卡-->
    <van-tabbar v-model="activeIndex" fixed placeholder @change="switchIndex">
      <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item name="search" icon="search">即时查</van-tabbar-item>
      <!-- <van-tabbar-item name="records" icon="friends-o"
        >记录中心</van-tabbar-item
      > -->
      <van-tabbar-item name="more" icon="more-o">更多</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Notify } from "vant";
import "@/assets/icon/iconfont.js";

export default {
  name: "index",

  data() {
    return {
      userName: null, //用户姓名
      IsShow: null,
      activeIndex: "home",
    };
  },
  created() {
    //this.getUserName();
    if (this.$route.query.index == "search") {
      this.activeIndex = "search";
    } else if (this.$route.query.index == "records") {
      this.activeIndex = "records";
    } else if (this.$route.query.index == "more") {
      this.activeIndex = "more";
    } else {
      this.activeIndex = "home";
    }
  },
  mounted() {
    this.IsShow = this.$store.state.IsShow;
    // console.log(this.IsShow);
    // this.clgUrlName()
  },

  //若是从登录页面进入首页，弹出欢迎词
  beforeRouteEnter(to, from, next) {
    if (from.name == "Login") {
      next((ev) => {
        ev.getUserName();
      });
    }
    next();
  },
  methods: {
    //通过localStorage获取用户名
    getUserName() {
      console.log(window.localStorage.getItem("token"));
      this.$http.get("sys/userInfo", {}).then((res) => {
        console.log(res);
        this.userName = res.data.data.username;
        window.localStorage.setItem('userName',res.data.data.username)
        this.ShowNotify();
      });
    },
    //弹出欢迎词
    ShowNotify() {
      Notify({
        type: "warning",
        message: "欢迎，亲爱的" + this.userName,
        duration: 2000,
      });
    },

    switchIndex(index) {
      this.activeIndex = index;
      console.log(this.activeIndex);
    },
    //关闭通知栏触发
    closeNotice() {
      console.log("关闭通知栏");
      this.$store.commit("checkshow");
      // console.log(this.IsShow);
    },
    clgUrlName() {
      //打印当前url名
      console.log(this.$route.name);
    },

    //跳转门诊挂号页面
    goAppointment() {
      this.$router.push({
        path: "./appointment",
      });
    },
    //跳转住院病人管理
    goManagement() {
      this.$router.push({
        path: "./PatientManagement",
      });
    },
    //跳转住院费用管理
    goCost() {
      this.$router.push({
        path: "./PatientIndex",
      });
    },
    //跳转药房管理页面
    goDrugManage() {
      this.$router.push({
        path: "./DrugMain",
      });
    },
    //病例病案跳转
    toMedicalCase() {
      this.$router.push({
        path: "./medicalCase",
      });
    },
    //员工管理跳转
    ToStaff() {
      this.$router.push({
        path: "./staffManage",
      });
    },
    //报表管理跳转
    GoReport() {
      this.$router.push({
        path: "./report",
      });
    },
    //系统查询
    toSearch() {
      this.activeIndex = "search";
    },
    //跳转更多页面
    goMore() {
      this.$router.push({
        path: "./more",
      });
    },
    //跳转个人中心
    goSelf() {
      this.$router.push({
        path: "./self",
      });
    },
    //挂号历史跳转
    goHospitalization() {
      this.$router.push({
        path: "./hospitalization",
      });
    },
    //跳转智能导航
    goNavigation() {
      this.$router.push({
        path: "./Navigation",
      });
    },
    //体检预约跳转
    goExamination() {
      this.$router.push({
        path: "./examination",
      });
    },

    //系统介绍跳转
    goSystem() {
      this.$router.push({
        path: "./System",
      });
    },
    /*----- 即时查模板的事件 -----*/
    //跳转床位查询
    goBedSearch() {
      this.$router.push({
        path: "./bedSearch",
      });
    },
    //诊疗项目查询
    goDiagnostic() {
      this.$router.push({
        path: "./diagnostic",
      });
    },
    //药品价格查询
    goDrgub() {
      this.$router.push({
        path: "./drugsSearch",
      });
    },
    /*----- 记录中心的事件 -----*/
    gorecord(id) {
      this.$router.push({
        path: "./record",
        query: { id },
      });
    },
    /*----- 更多模板的事件 -----*/
    //留言评价
    ToEvaluation() {
      this.$router.push({
        path: "./evaluation",
      });
    },
    //注销登录点击
    outLogin() {
      //清除所有数据
      localStorage.clear();
      Toast({
        message: "退出成功",
        duration: "1000",
      });
      //跳转首页
      setTimeout(() => {
        this.$router.push({
          path: "/",
        });
      }, 1500);
    },
    //清空缓存点击
    clear() {
      Toast({
        message: "清除成功",
        duration: "1000",
      });
    },
    //用户设置点击
    userSetUp() {
      this.$router.push({
        path: "./userSetUp",
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/assets/style/index.css";
#app /deep/.van-tabbar--fixed {
  position: fixed !important;
}
#app {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
}
#app /deep/ .mint-header-title {
  overflow: initial;
}
.headerImg {
  padding-top: 5px;
}
.moreBox {
  width: 80px;
  height: 60px;
  background-color: #ddd;
  font-size: 14px;
  position: fixed;
  top: 40px;
  right: 0;
  transition: all 0.5s;
  z-index: 666;
  span {
    font-weight: 600;
    padding: 6px 0;
    width: 100%;
    text-align: center;
    display: inline-block;
  }
}

.mint-swipe {
  width: 100%;
  height: 200px;
  .swip-item-1 {
    background: transparent;
  }
  .swip-item-2 {
    background: transparent;
  }
  .swip-item-3 {
    background: transparent;
  }
  .items {
    font-size: 36px;
    text-align: center;
    line-height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.fucs {
  display: flex;
  flex-direction: column;
  margin: 10px 5px 30px 5px;
  .textInner {
    font-size: 19px;
    font-weight: 700;
    text-align: center;
    margin: 5px 0 10px 0;
    color: #74b9ff;
  }
  .textInner::after,
  .textInner::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 22px;
    background-color: #74b9ff;
    vertical-align: bottom;
  }
  .textInner::after {
    margin-left: 5px;
  }
  .textInner::before {
    margin-right: 5px;
  }
  .mint-button {
    margin-top: 20px;
  }
  .Iwarp {
    width: 100%;
    display: flex;
    /* .lastInner {
      flex: 1;
      margin-right: 0 !important;
      justify-content: center;
    } */
  }
  .inner:nth-child(1),
  .inner:nth-child(3) {
    margin: 0 5px 7px 0;
  }
  .inner:nth-child(2),
  .inner:nth-child(4) {
    margin: 0 0 7px 0;
  }
  .inner {
    display: flex;
    align-items: center;
    background-color: #fff;
    flex-wrap: wrap;
    width: 50%;
    border-radius: 4px;
    padding: 10px 0 10px 10px;
    .icon {
      width: 40px;
      height: 40px;
    }
    .innerTxt {
      font-size: 18px;
      padding-left: 5px;
    }
  }
}
.innerImg {
  width: 40px;
  height: 40px;
}
/* 搜索模板的样式 */
.SearchContent {
  .icon {
    width: 45px;
    height: 45px;
  }
  padding-top: 15px;
  background-color: #fff;
  .inner {
    display: flex;
    align-items: center;
    padding: 5px 0;
    margin: 0 15px 5px 15px;
    .inner3 {
      width: 40px;
      height: 40px;
      padding: 3px 0 3px 3px;
    }
  }
  .innerTxt {
    font-weight: 700;
    font-size: 18px;
    margin-left: 10px;
  }
  .inner:nth-child(1),
  .inner:nth-child(2) {
    border-bottom: 1px solid #ccc;
  }
  .txtItems {
    flex: 1;
    text-align: right;
    font-size: 25px;
  }
}
/* 记录模板的样式 */
.RecordsContent {
  padding-top: 15px;
  background-color: #fff;
  .inner {
    display: flex;
    align-items: center;
    padding: 5px 0;
    margin: 0 15px 5px 15px;
    .icon {
      width: 45px;
      height: 45px;
    }
    .icon1 {
      width: 32px;
      height: 40px;
    }
  }
  .innerTxt {
    font-weight: 700;
    font-size: 18px;
    margin-left: 10px;
  }
  .txtItems {
    flex: 1;
    text-align: right;
    font-size: 25px;
  }
  .inner:nth-child(4) {
    margin-left: 9px;
    .innerTxt {
      margin-left: 4px;
    }
  }
}
/* 更多模板内容样式 */
.MoreContent {
  padding-top: 15px;
  .icon {
    width: 45px;
    height: 45px;
  }
  background-color: #fff;
  .inner {
    display: flex;
    align-items: center;
    padding: 5px 0;
    margin: 0 15px 5px 15px;
  }
  .innerTxt {
    font-weight: 700;
    font-size: 18px;
    margin-left: 10px;
  }
  .inner:nth-child(1),
  .inner:nth-child(2) {
    border-bottom: 1px solid #ccc;
  }
  .inner:nth-child(3) {
    height: 46px;
    margin-left: 24px;
    .innerTxt {
      padding-left: 11px;
    }
  }
  .txtItems {
    flex: 1;
    text-align: right;
    font-size: 25px;
  }
}
.btnClick {
  position: fixed;
  width: 100%;
  bottom: 0;
  margin-bottom: 51px;
}
</style>